<template>
  <el-container>
    <el-main>
      <el-card v-show="!addressAll.length" style="text-align: center">
        <h3>无收货地址</h3>
        <el-button size="mini" @click="jump('/addressChange')">新增地址</el-button>
      </el-card>
      <div v-show="addressAll.length">
        <el-card v-for="(address,i) in addressAll" :key="i" shadow="never">
          <el-row>
            <el-col :span="18">
              <span> {{address.name}}</span> <span style="color: red;font-size: 13px;background-color:#fcc;">{{address.tag?'家':'公司'}}</span>
              <p style="font-size: 13px;margin:0">{{address.detail}}</p>
              <p style="color:grey;font-size: 12px;margin:0">{{address.username}} {{address.sex?'女士':'男士'}}
                {{address.phone}}</p>
            </el-col>
            <el-col :span="6">
              <el-button>修改</el-button>
            </el-col>
          </el-row>
        </el-card>
        <el-divider></el-divider>
        <p @click="jump('/addressChange')" style="color: #409EFF">新增地址</p></div>
    </el-main>
  </el-container>
</template>

<script>
    export default {
        name: "Address",
        data() {
            return {
                addressAll: [],
                get:null,
            }
        },
        methods: {
            jump(route) {
                this.$router.push(route);
            },
            getAddress() {
                this.addressAll = JSON.parse(this.$ls.get('address')) || [];
                this.get = this.$route.query.get||null;

            }
        },
        created() {
            this.getAddress();
        }
    }
</script>

<style scoped>
  h3 {
    font-size: 15px;
  }
</style>
